import {PageContainer, ProCard, ProTable} from '@ant-design/pro-components';
import {useLocation} from '@umijs/max';
import {ConfigProvider, Tabs, Typography} from 'antd';
import {useEffect, useState} from 'react';

import Requirements from '@/pages/Administrative/FileCollection/components/Requirements';
import {getFileCollectionTaskDetail} from '@/services/administrative/file-collection';
import {FileCollectionDetail, SubmitterType} from '@/utils/types/administrative/file-collection';
import {BarsOutlined, FileSearchOutlined, HomeOutlined, MessageOutlined, MutedOutlined} from "@ant-design/icons";

const CollectionDetails = () => {
  // 获取路由参数
  const location = useLocation();
  const taskId = new URLSearchParams(location.search).get('task_id');
  // loading
  const [loading, setLoading] = useState<boolean>(false);
  // 数据
  const [data, setData] = useState<FileCollectionDetail>(null);

  const getDetailData = () => {
    if (!taskId) {
      return;
    }
    getFileCollectionTaskDetail(taskId)
      .then((response) => {
        setData(response.data);
        console.log(response);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      })
      .finally(() => {
        setLoading(false);
      });
  }


  useEffect(() => {
    getDetailData();
  }, []);

  useEffect(() => {
    getDetailData();
  }, [taskId]);

  const handleSearchName = (value: string) => {

  }

  const columns = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
    },
    {
      title: '用户名',
      dataIndex: 'user_name',
      key: 'user_name',
      align: 'center',
    },
    {
      title: '文件类型',
      dataIndex: 'file_type',
      key: 'file_type',
      align: 'center',
      filters: true,
      valueType: 'select',
      valueEnum: {
        all: '任意类型',
        image: '图片文件',
        word: 'Word 文档',
        excel: 'Excel 表格',
        pdf: 'PDF 文档',
        ppt: 'PPT 幻灯片',
        zip: 'ZIP 压缩包',
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      filters: true,
      valueEnum: {
        0: {text: '未提交', status: 'default'},
        1: {text: '已提交', status: 'warning'},
        2: {text: '已审核', status: 'success'},
        3: {text: '已驳回', status: 'error'},
      },
    },
    {
      title: '审核意见',
      dataIndex: 'recommend',
      key: 'recommend',
      align: 'center',
    },
    {
      title: '提交时间',
      dataIndex: 'submit_time',
      align: 'center',
      sorter: true,
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      align: 'center',
      render: (_, record) => [
        <Typography.Link
          key={'preview'} style={{borderBottom: '1px solid #ccc', marginRight: 10}}
          onClick={() => {
          }}>
          预览
        </Typography.Link>,
        <Typography.Link
          key={'download'}
          onClick={() => {
            window.open(record.file_path)
          }}>
          下载
        </Typography.Link>,
      ],
    },
  ]

  const items = [
    {
      key: '1',
      label: '工作要求',
      icon: <HomeOutlined/>,
      children: <Requirements data={data?.content as string}/>,
    },
    {
      key: '2',
      label: '提交详情',
      icon: <BarsOutlined/>,
      children: <ProTable<SubmitterType>
        dataSource={data?.submit?.submitter}
        columns={columns}
      ></ProTable>,
    },
    {
      key: '3',
      label: '审核记录',
      icon: <FileSearchOutlined/>,
      children: <ProCard>
        <Typography.Paragraph>暂无审核记录</Typography.Paragraph>
      </ProCard>,
    },
    {
      key: '4',
      label: '公告',
      icon: <MutedOutlined/>,
      children: <ProCard>
        <Typography.Paragraph>暂无公告</Typography.Paragraph>
      </ProCard>,
    },
    {
      key: '5',
      label: '评论',
      icon: <MessageOutlined/>,
      children: <ProCard>
        <Typography.Paragraph>暂无评论</Typography.Paragraph>
      </ProCard>,
    },
  ]

  return (
    <ConfigProvider>
      <PageContainer
        loading={loading}
        style={{width: '100%'}}
        header={{title: null, breadcrumb: {}}}
      >
        <ProCard>
          <Typography.Title level={3} style={{textAlign: 'center'}}>{data?.title}</Typography.Title>
        </ProCard>
        <Tabs items={items}/>
        {/*<div*/}
        {/*  style={{width: '100%', backgroundColor: '#fff', borderRadius: 10}}*/}
        {/*>*/}
        {/*</div>*/}
      </PageContainer>
    </ConfigProvider>
  )
}

export default CollectionDetails;
